<template>
	<view class="edit-profile">
		<!-- 顶部导航栏 -->
		<view class="header">
			<uni-icons class="back-icon" type="left" size="36rpx" color="#00CC71" @click="navigateBack" />
			<text class="title">编辑个人信息</text>
		</view>

		<!-- 头像区域（含编辑按钮） -->
		<view class="avatar-wrap">
			<image class="avatar" :src="formData.avatar || '/static/doctor.png'" 
			mode="aspectFill" @click="chooseAvatar"></image>
			<view class="edit-mask" @click="chooseAvatar">
				<image src="../../static/bi2.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
			</view>
		</view>

		<!-- 信息表单 -->
		<view class="form-section">
			<!-- 详细地址 -->
			<view class="form-item">
				<text class="label">详细地址</text>
				<input class="input" type="text" placeholder="请输入详细地址" v-model="formData.address" />
			</view>

			<!-- 生日 + 性别 -->
			<view class="form-row">
				<view class="form-col">
					<text class="label">出生日期</text>
					<picker mode="date" :value="formData.birthDate" @change="handleDateChange">
						<view class="input">{{ formData.birthDate || '请选择出生日期' }}</view>
					</picker>
				</view>
				<view class="form-col gender-col">
					<view class="label">性别</view>
					<picker :range="genders" :value="genderIndex" @change="onGenderChange">
						<view class="gender-tag">
							{{ genders[genderIndex] }}
							<uni-icon type="arrowdown" size="24rpx" color="#00CC71"></uni-icon>
						</view>
					</picker>
				</view>
			</view>

			<!-- 姓名 -->
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" type="text" placeholder="请输入姓名" v-model="formData.name" />
				<text class="desc-tip">（姓名和身份证号、手机号、性别无法修改）</text>
			</view>

			<!-- 身份证 -->
			<view class="form-item">
				<text class="label">居民身份证</text>
				<input class="input" type="idcard" placeholder="请输入身份证号" v-model="formData.idCard" disabled />
			</view>

			<!-- 手机号 -->
			<view class="form-item">
				<text class="label">手机号</text>
				<input class="input" type="number" placeholder="请输入手机号" v-model="formData.phone" disabled />
			</view>
		</view>

		<!-- 确认修改按钮 -->
		<button class="confirm-btn" @click="handleSubmit">确认修改</button>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

interface FormData {
  address: string
  birthDate: string
  gender: number
  name: string
  idCard: string
  phone: string
  avatar?: string
}

// 用户数据
const genders = ref(['男', '女', '保密'])
const genderIndex = ref(0)
const loading = ref(false)

// 表单数据 - 从本地存储初始化
const formData = reactive<FormData>({
  address: '',
  birthDate: '1996-11-02',
  gender: 0,
  name: '张三',
  idCard: '4500000000000000',
  phone: '19166666666'
})

// 初始化表单数据
onMounted(() => {
  const userInfo = uni.getStorageSync('userInfo') || {}
  formData.avatar = userInfo.avatar || '/static/doctor.png'
  formData.address = userInfo.address || ''
  formData.birthDate = userInfo.birthday || '1996-11-02'
  formData.gender = userInfo.gender || 0
  formData.name = userInfo.name || '用户名'
  formData.idCard = userInfo.idCard || '4500000000000000'
  formData.phone = userInfo.phone || '19166666666'
  
  // 设置性别索引
  genderIndex.value = formData.gender
})

// 返回上一页
function navigateBack() {
  uni.navigateBack()
}

// 选择头像（仅本地处理）
const chooseAvatar = async () => {
  try {
    const res = await uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
    })
    
    if (res.tempFilePaths.length > 0) {
      // 直接使用本地临时路径
      formData.avatar = res.tempFilePaths[0]
      uni.showToast({ title: '头像已选择', icon: 'success' })
    }
  } catch (error) {
    uni.showToast({
      title: '选择头像失败',
      icon: 'none',
      duration: 3000
    })
    console.error('选择头像错误:', error)
  }
}

// 处理日期选择
const handleDateChange = (e: any) => {
  formData.birthDate = e.detail.value
}

// 性别选择器事件
const onGenderChange = (e: any) => {
  genderIndex.value = e.detail.value
  formData.gender = genderIndex.value
}

// 提交修改
const handleSubmit = () => {
  if (!formData.avatar) {
    uni.showToast({ title: '请选择头像', icon: 'none' })
    return
  }
  
  if (!formData.address) {
    uni.showToast({ title: '请输入详细地址', icon: 'none' })
    return
  }
  
  try {
    // 更新本地用户信息
    const updatedUserInfo = {
      ...uni.getStorageSync('userInfo') || {},
      avatar: formData.avatar,
      address: formData.address,
      birthday: formData.birthDate,
      gender: formData.gender,
      name: formData.name
    }
    
    // 保存到本地存储
    uni.setStorageSync('userInfo', updatedUserInfo)
    
    // 触发全局事件通知其他页面更新
    uni.$emit('userInfoUpdated', updatedUserInfo)
    
    uni.showToast({ title: '修改成功', icon: 'success' })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    uni.showToast({ title: '修改失败', icon: 'none' })
    console.error('更新用户信息错误:', error)
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.edit-profile {
  background: #FFF;
  min-height: 100vh;
  padding-top: 90rpx;
  box-sizing: border-box;
}

.back-icon {
  margin-right: 16rpx;
}

/* 导航栏 */
.header {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 32rpx;
  border-bottom: 4rpx solid #00CC71;
  box-shadow: 0 4rpx 12rpx rgba(0, 204, 113, 0.1);
  z-index: 999;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #00CC71;
  margin-left: 16rpx;
}

/* 头像区域 */
.avatar-wrap {
  position: relative;
  width: 180rpx;
  height: 180rpx;
  margin: 60rpx auto 60rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6rpx solid #FFF;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.edit-mask {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60rpx;
  height: 60rpx;
  background: #00CC71;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 8rpx rgba(0, 204, 113, 0.3);
}

/* 表单区域 */
.form-section {
  padding: 0 32rpx;
}

.form-item,
.form-row {
  margin-bottom: 40rpx;
}

.label {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 12rpx;
  margin-right: 29rpx;
}

.input {
  width: 100%;
  font-size: 28rpx;
  color: #333;
  padding: 16rpx 0;
  border: none;
  border-bottom: 2rpx solid #E5E5E5;
}

.input::placeholder {
  color: #B2B2B2;
}

/* 行布局（生日+性别） */
.form-row {
  display: flex;
  justify-content: space-between;
}

.form-col {
  width: 48%;
}

.gender-col {
  text-align: right;
  display: flex;
  justify-content: left;
}

.gender-tag {
  align-items: center;
  font-size: 28rpx;
  color: #00CC71;
  border: 2rpx solid #00CC71;
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  background-color: #F8FFF4;
  width: 97rpx;
  text-align: center;
}

.desc-tip {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-top: 8rpx;
}

/* 确认按钮 */
.confirm-btn {
  width: 80%;
  margin: 60rpx auto;
  background: linear-gradient(90deg, #00CC71 0%, #00B867 100%);
  color: #FFF;
  font-size: 36rpx;
  font-weight: bold;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 48rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 204, 113, 0.3);
}

.confirm-btn::after {
  border: none;
}
</style>